<!-- jQuery Scripts -->
<script src="jquery/jquery-1.11.1.js"></script>
<script src="jquery/jquery-ui-1.11.2.custom/jquery-ui.js"></script>
<script src="jquery/DataTables-1.10.3/media/js/jquery.dataTables.js"></script>

<!-- jQuery Styles -->
<link href="jquery/jquery-ui-1.11.2.custom/jquery-ui.css" rel="stylesheet" />
<link href="jquery/jquery-ui-1.11.2.custom/jquery-ui.structure.css" rel="stylesheet" />
<link href="jquery/jquery-ui-1.11.2.custom/jquery-ui.theme.css" rel="stylesheet" />
<link href="jquery/DataTables-1.10.3/media/css/jquery.dataTables_themeroller.css" rel="stylesheet" />

<!-- Page Specific -->
<link rel="stylesheet" href="css/style.css" type="text/css" />

<script type="text/javascript">
/* $(function() { }) is equivalent to document ready */
$(function() {
	// Set up the datatable:
	$('table#reservations').dataTable({
		"order": [[ 2, "desc" ]],
		"bJQueryUI": true,
		"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
		"pageLength": 25
	});
	// Buttonize Edits:
	$('.editReservation').button({
		icons: {
			primary: 'ui-icon-pencil'
		},
		text: false
	});
	// Buttonize Deletes:
	$('.deleteReservation').button({
		icons: {
			primary: 'ui-icon-cancel'
		},
		text: false
	});
	// Tooltips:
	$( document ).tooltip({
		track: true
	});
	
	
	$('#deleteReservationConfirm').hide();
	$('.deleteReservation').click(function(e) {
		var thelink = $(this);
		e.preventDefault();
		$('#deleteReservationConfirm').dialog({
			autoOpen: false,
			resizable: false,
			modal: true, 
			title: 'Delete Reservation',
			buttons: {
				Delete: function() {
					$(this).dialog('close');
					thelink.closest('form').submit();
				}, 
				Cancel: function() {
					$(this).dialog('close');
					return false;
				}
			}
		});
		$('#deleteReservationConfirm').dialog('open');
	});
	
	$('.editReservation').each(function() {
		var $link = $(this);
		$link.click(function(e) {
			e.preventDefault();
			var $dialog = $('<div></div>')
				.load('controller', $link.closest('form').serialize(), + '#editReservationDiv')
				.dialog({
					autoOpen: false,
					resizable:false,
					modal: true,
					width: '400px', 
					title: 'Edit Reservation',
					buttons: {
						Submit: function() {
							if (validReservation()) {
								$('#editReservationForm').submit();
							}
						}, 
						Cancel: function() {
							$(this).dialog('close');
						}
					}, 
					close: function(ev, ui) {
						$(this).dialog('destroy').remove();
					}
				});
			$dialog.dialog('open');
			return false;
		});
		
	});
});
</script>